<template>
  <a-modal
    :visible="visible"
    title="二维码验证"
    :footer="null"
    @cancel="close"
    :width="550"
    @destroyOnClose="true"
  >
    <div class="qr-box">
      <div class="title">
        请先打开电子税局APP，点击右上角“扫一扫”扫描下方二维码
      </div>

      <a-spin :spinning="spinning">
        <div class="content">
          <qrcode-vue
            v-if="qrcodeUrl"
            :value="qrcodeUrl"
            :size="160"
            class="code"
            :id="'canvas_1'"
          />
        </div>
      </a-spin>

      <div class="show-info">
        <span>有效期倒计时：</span>
        <span>
          <a-statistic-countdown
            :valueStyle="{ fontSize: '14px' }"
            :value="deadline"
            @finish="getQrInfo"
            format="mm:ss"
        /></span>
      </div>
      <div class="show-info">
        <span>认证账号：</span>
        <span>{{ phoneNum }}</span>
        <span>（{{ name }}）</span>
      </div>
      <div class="mt-10">
        <a-space>
          <a-button type="primary" @click="getQrInfo">刷新二维码</a-button>
          <a-button type="primary" @click="getFaceVerifyResult"
            >扫码完成</a-button
          ></a-space
        >
      </div>
    </div>
  </a-modal>
</template>

<script>
import { watch, reactive, toRefs } from "vue";
import QrcodeVue from "qrcode.vue";
import request from "../../../../common/utils/request";
import { message } from "ant-design-vue";
export default {
  props: {
    visible: { type: Boolean, default: false },
    group_key: {
      type: String,
      default: "",
    },
  },
  components: {
    QrcodeVue,
  },
  setup(props, context) {
    const state = reactive({
      phoneNum: "",
      name: "",
      deadline: undefined,
      qrcodeUrl: "",
      spinning: false,
    });

    const getUserInfo = () => {
      request
        .get("/org", "/eInvoice/szepiao/taxEtaxUser", {
          group_key: props.group_key,
        })
        .then((res) => {
          // console.log(res.info);
          state.phoneNum = res.info.phoneNum;
          state.name = res.info.name;
        });
    };

    const getQrInfo = () => {
      state.spinning = true;
      request
        .get("/org", "/eInvoice/szepiao/getFaceCode", {
          group_key: props.group_key,
        })
        .then((res) => {
          // console.log(res);
          state.qrcodeUrl = res.qrcode;
          state.deadline = Date.now() + 1000 * 60 * 5;
        })
        .finally(() => {
          state.spinning = false;
        });
    };

    const getFaceVerifyResult = () => {
      request
        .get("/org", "/eInvoice/szepiao/getFaceVerifyResult", {
          group_key: props.group_key,
        })
        .then((res) => {
          // console.log(res);
          message.success("扫码成功");
          context.emit("closeModal");
        });
    };

    const close = () => {
      context.emit("closeModal");
    };

    const init = () => {
      getQrInfo();
      getUserInfo();
    };

    watch(
      () => props.visible,

      (val) => {
        if (val == true) {
          init();
        } else {
          state.qrcodeUrl = "";
        }
      }
    );
    return {
      ...toRefs(state),
      close,
      getQrInfo,
      getFaceVerifyResult,
    };
  },
};
</script>

<style lang="less" scoped>
.qr-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  .title {
    height: 46px;
    line-height: 46px;
    color: red;
    font-size: 15px;
    font-weight: 500;
  }

  .show-info {
    margin-top: 10px;
    text-align: center;

    span {
      display: inline-block;
      font-size: 14px;
      color: #666;
    }
  }

  .content {
    margin-top: 8px;
    width: 180px;
    padding: 10px;
    display: flex;
    justify-content: center;
    //   height: 500px;
    border: 1px solid #eee;
  }
}
</style>
